<template>
  <div class="p-2">
    <div class="viewBox">
      <div class="title-item">
        <span class="line-box"></span><span>{{ title }}</span>
      </div>
      <!-- 添加或修改教学资源管理公有库对话框 -->

      <el-form
        ref="resourcesPublicFormRef"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="名称" prop="resName">
          <el-input v-model="form.resName" placeholder="请输入名称" />
        </el-form-item>

        <el-form-item label="类型" prop="resType">
          <el-select v-model="form.resType" placeholder="请选择类型"  @change="getType">
            <el-option
              v-for="dict in sys_file_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="resDesc">
          <el-input v-model="form.resDesc" placeholder="请输入说明" />
        </el-form-item>
        <el-form-item label="内容">
          <editor v-model="form.content" :min-height="120" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item label="附件内容" prop="attach">
          <videoFileUpload v-model="form.attach" v-if="form.resType == '0'" />
          <imageUpload v-model="form.attach" v-if="form.resType == '1'" />
          <fileUpload v-model="form.attach" v-if="form.resType == '2'" />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="ResourcesPublic" lang="ts">
import {
  listResourcesPublic,
  getResourcesPublic,
  delResourcesPublic,
  addResourcesPublic,
  updateResourcesPublic,
} from "@/api/core/resourcesPublic";
import {
  ResourcesPublicVO,
  ResourcesPublicQuery,
  ResourcesPublicForm,
} from "@/api/core/resourcesPublic/types";
import { remove } from "nprogress";
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_file_type } = toRefs<any>(proxy?.useDict("sys_file_type"));

const resourcesPublicList = ref<ResourcesPublicVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const formId = ref<string | number>();
const type = ref<string | number>();
const queryFormRef = ref<ElFormInstance>();
const resourcesPublicFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: "",
});

const initFormData: ResourcesPublicForm = {
  resName: undefined,
  resType: undefined,
  resDesc: undefined,
  content: undefined,
  remark: undefined,
  attach: undefined,
};
const data = reactive<PageData<ResourcesPublicForm, ResourcesPublicQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    resName: undefined,
    resType: undefined,
    createBy: undefined,
    params: {},
  },
  rules: {
    resName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
    resType: [{ required: true, message: "类型不能为空", trigger: "blur" }],
    resDesc: [{ required: true, message: "说明不能为空", trigger: "blur" }],
    content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
    // remark: [
    //   { required: true, message: "备注不能为空", trigger: "blur" }
    // ],
    attach: [{ required: true, message: "附件内容不能为空", trigger: "blur" }],
  },
});

const { queryParams, form, rules } = toRefs(data);

// // 监听 resType 的变化
// watch(
//   () => form.value.resType,
//   (newVal, oldVal) => {
//     // 如果 resType 发生变化，则删除 attach
//     if (newVal !== oldVal) {
//       delete form.value.attach;
//     }
//   }
// );
const getType = (value) => {
   if (form.value.resType != value) {
    delete form.value.attach;
   }
}

/** 取消按钮 */
const cancel = () => {
  reset();
  proxy?.$router.go(-1);
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  resourcesPublicFormRef.value?.resetFields();
};


/** 提交按钮 */
const submitForm = () => {
  resourcesPublicFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (formId.value) {
        await updateResourcesPublic(form.value).finally(() =>  buttonLoading.value = false);
        proxy?.$modal.msgSuccess("编辑成功");
      } else {
        await addResourcesPublic(form.value).finally(() => (buttonLoading.value = false));
        proxy?.$modal.msgSuccess("新增成功");
      }
      proxy?.$router.go(-1);
    }
  });
};



/** 获取数据 */
(async () => {
  formId.value = route.query && (route.query.id as string);
  type.value = route.query && (route.query.type as string);
  if (formId.value) {
    const res = await getResourcesPublic(formId.value);
    Object.assign(form.value, res.data);
    title.value = "编辑";
  }else{
    title.value = "新增";
    form.value.resType = sys_file_type.value?(sys_file_type.value)[0].value:'';//设置一个默认类型
  }
})();
</script>
<style lang="scss" scoped>
.viewBox {
  margin: 15px 15px 80px 15px;
  .title-item {
    display: flex;
    align-items: center;
    height: 24px;
    line-height: 24px;
    font-size: 20px;
    margin: 30px 0 20px;
    span {
      display: inline-block;
      margin: 0 5px;
    }
    .line-box {
      width: 4px;
      height: 24px;
      background: #05afea;
    }
  }
  .topTit {
    margin-top: 10px;
  }
  .el-form-item--default {
    margin: 15px 30px;
  }
  :deep(.el-textarea__inner) {
    width: 300px !important;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .dialog-footer {
    margin-top: 40px;
    text-align: center;
  }
}

.imgView-box {
  :deep(.el-upload-list--picture-card
      .el-upload-list__item-actions
      .el-upload-list__item-delete) {
    display: none !important;
  }
  :deep(.el-upload--picture-card) {
    display: none !important;
  }

  :deep(.el-upload-list__item.is-success .el-upload-list__item-status-label),
  :deep(.el-icon--close-tip),
  :deep(.el-icon--close) {
    display: none !important;
  }
}
</style>
